<template>
    <div class="simcard">
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="批量操作：" prop="category" class="mt_5">
                        <el-select v-model="formInline.category" filterable placeholder="请选择" class="select" @change="show">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="mt_5">
                        <el-input v-model="formInline.user" placeholder="ICCID或者设备名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary">导出</el-button>
                    <el-button type="primary" @click="dialogVisible = true">物联卡筛选</el-button>
                </el-form>
                <el-dialog title="物联卡筛选" :visible.sync="dialogVisible" width="40%">
                    <el-form>
                        <el-row class="lh33">
                            <el-col :md="8" class="tr mb20">
                                运营商产品：
                            </el-col>
                            <el-col :md="16" class="mb20">
                                <el-select v-model="value1" filterable placeholder="请选择" class="w100">
                                    <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :md="8" class="tr mb20">
                                运营商状态：
                            </el-col>
                            <el-col :md="16" class="mb20">
                                <el-select v-model="value2" filterable placeholder="请选择" class="w100">
                                    <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :md="8" class="tr mb20">
                                卡状态：
                            </el-col>
                            <el-col :md="16" class="mb20">
                                <el-select v-model="value3" filterable placeholder="请选择" class="w100">
                                    <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :md="8" class="tr mb20">
                                实名认证状态：
                            </el-col>
                            <el-col :md="16" class="mb20">
                                <el-select v-model="value4" filterable placeholder="请选择" class="w100">
                                    <el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :md="8" class="tr mb20">
                                卡号类型：
                            </el-col>
                            <el-col :md="16" class="mb20">
                                <el-select v-model="value5" filterable placeholder="请选择" class="w100">
                                    <el-option v-for="item in option5" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </el-col>
            <el-col :md="4" class="float-right">
                <el-popover placement="bottom" trigger="hover" title="筛选条件">
                    <el-menu>
                        <el-menu-item index="1">
                            <el-checkbox v-model="checked1">电话号码</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-checkbox v-model="checked2">IMSI</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <el-checkbox v-model="checked3">是否要实名认证</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-checkbox v-model="checked4">实名认证状态</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <el-checkbox v-model="checked5">是否可续订套餐</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="6">
                            <el-checkbox v-model="checked6">是否断网</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="7">
                            <el-checkbox v-model="checked7">累计使用流量</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="8">
                            <el-checkbox v-model="checked8">运营商激活时间</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="9">
                            <el-checkbox v-model="checked9">导入时间</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="10">
                            <el-checkbox v-model="checked10">激活宽限期</el-checkbox>
                        </el-menu-item>
                    </el-menu>
                    <span slot="reference">
                        <el-button type="primary">
                            <i class="iconfont icon-loudou"></i>
                        </el-button>
                    </span>
                </el-popover>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" label="id" width="40" prop="id">
            </el-table-column>
            <el-table-column label="ICCID" sortable width="200">
                <template slot-scope="scope">
                    <span class="link" @click="getDetail(scope.row)">{{ scope.row.iccid}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话号码" width="150" v-if="checked1">
            </el-table-column>
            <el-table-column prop="imsi" label="IMSI" width="100" v-if="checked2">
            </el-table-column>
            <el-table-column prop="internal_status_display" label="客户" width="150">
            </el-table-column>
            <el-table-column prop="type_display" label="卡状态" width="100">
            </el-table-column>
            <el-table-column prop="card_status_display" label="卡号类别" width="120">
            </el-table-column>
            <el-table-column prop="device_name" label="设备名称" width="120">
            </el-table-column>
            <el-table-column prop="carrier_status" label="运营商状态" width="120">
            </el-table-column>
            <el-table-column prop="card_group" label="卡号分组" width="120">
            </el-table-column>
            <el-table-column prop="is_shiming" label="是否要实名认证" width="120" v-if="checked3">
            </el-table-column>
            <el-table-column prop="vertical_status" label="实名认证状态" width="120" v-if="checked4">
            </el-table-column>
            <el-table-column prop="is_package" label="是否可续订套餐" width="120" v-if="checked5">
            </el-table-column>
            <el-table-column prop="off_net" label="是否断网" width="120" v-if="checked6">
            </el-table-column>
            <el-table-column prop="leiji" label="累计使用流量" width="120" v-if="checked7">
            </el-table-column>
            <el-table-column prop="is_monthly_or_custom_plan" label="本月用量" sortable width="120">
            </el-table-column>
            <el-table-column prop="all_package" label="套餐总量" sortable width="120">
            </el-table-column>
            <el-table-column
            label="运营商激活时间"
            sortable
            width="200"
            v-if="checked8"
            >
                <template slot-scope="scope">
                    {{ scope.row.carrier_activity_time}}
                </template>
            </el-table-column>
            <el-table-column
            label="导入时间"
            sortable
            width="200"
            v-if="checked9"
            >
                <template slot-scope="scope">
                    {{ scope.row.dao_time}}
                </template>
            </el-table-column>
            <el-table-column
            label="激活宽限期"
            sortable
            width="200"
            v-if="checked10"
            >
                <template slot-scope="scope">
                    {{ scope.row.kuan_time}}
                </template>
            </el-table-column>
            <el-table-column
            label="数据更新时间"
            sortable
            width="200"
            >
                <template slot-scope="scope">
                    {{ scope.row.data_update_time}}
                </template>
            </el-table-column>
            <el-table-column prop="sheng_package" label="套餐剩余">
            </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialog" width="40%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="label">
           <el-form-item label="ICCID号码：" prop="textarea" 
           v-show="formInline.category == '选项1' || formInline.category == '选项4' || formInline.category == '选项5' || formInline.category == '选项6' || formInline.category == '选项7' "
           >
                <el-input
                type="textarea"
                :rows="15"
                placeholder="输入 ICCID 号，多个号码分行间隔"
                v-model="ruleForm.textarea">
                </el-input>
            </el-form-item>
            <el-form-item label="导入卡号：" prop="textarea1" v-show="formInline.category == '选项2'">
                <el-input
                type="textarea"
                :rows="12"
                placeholder="输入 MSISDN 号，多个号码分行间隔"
                v-model="ruleForm.textarea1">
                </el-input>
            </el-form-item>
            <el-form-item label="选择产品：" prop="val1" v-show="formInline.category == '选项2'">
                <el-select v-model="ruleForm.val1" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in op1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="激活宽限期：" prop="val2" v-show="formInline.category == '选项2'">
                <div class="block">
                    <el-date-picker class="w100" v-model="ruleForm.val2" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="选择运营商账号：" prop="val3" v-show="formInline.category == '选项2'">
                <el-select v-model="ruleForm.val3" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in op2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="textarea2" v-show="formInline.category == '选项3'">
                <el-input
                type="textarea"
                :rows="6"
                placeholder="可以直接复制excel中整列 ICCID；手动输入多个 ICCID，一行一个"
                v-model="ruleForm.textarea2"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="卡号划拨" :visible.sync="dialog1" width="40%" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="label">
           <el-form-item label="已选择卡数：" prop="number">
                <el-input v-model="ruleForm.number" auto-complete="off" :disabled="true" :placeholder="checkbox_length"></el-input>
            </el-form-item>
            <el-form-item label="业务分类：" prop="va1">
                <el-select v-model="ruleForm.va1" filterable placeholder="请选择" class="w100" @change="select">
                    <el-option v-for="item in o1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择客户：" prop="va2">
                <el-select v-model="ruleForm.va2" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in o2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户业务模式：" prop="va3">
                <el-select v-model="ruleForm.va3" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in o3" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择产品：" prop="va4">
                <el-select v-model="ruleForm.va4" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in o6" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否可续订套餐：">
                <el-radio-group v-model="ruleForm.va5">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务周期：" prop="price">
                <el-input v-model="ruleForm.price" auto-complete="off" placeholder="请输入服务周期">
                    <template slot="append">月</template>
                </el-input>
            </el-form-item>
            <el-form-item label="计费方式：">
                <el-radio-group v-model="ruleForm.fee">
                <el-radio :label="1">前向</el-radio>
                <el-radio :label="2">后向</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="流量资费：" prop="zifei">
                <el-input v-model="ruleForm.zifei" auto-complete="off" placeholder="元/GB">
                </el-input>
            </el-form-item>
            <el-form-item label="超额流量资费：" prop="caozifei">
                <el-input v-model="ruleForm.caozifei" auto-complete="off" placeholder="元/GB">
                </el-input>
            </el-form-item>
            <el-form-item label="是否要实名认证：">
                <el-radio-group v-model="ruleForm.certify">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="沉默期：" prop="chenmo">
                <el-input v-model="ruleForm.chenmo" auto-complete="off" placeholder="请输入沉默期">
                    <template slot="append">月</template>
                </el-input>
            </el-form-item>
            <el-form-item label="可测试：">
                <el-checkbox-group v-model="ruleForm.test1">
                    <el-checkbox label="" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="测试期：" prop="test">
                <el-input v-model="ruleForm.test" auto-complete="off" placeholder="请输入测试期">
                    <template slot="append">月</template>
                </el-input>
            </el-form-item>
            <el-form-item label="流量单位：">
                <el-radio-group v-model="ruleForm.danwei">
                <el-radio :label="1">单位(KB)</el-radio>
                <el-radio :label="2">单位(MB)</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="测试流量：" prop="test3">
                <el-input v-model="ruleForm.test3" auto-complete="off" placeholder="请输入测试流量">
                </el-input>
            </el-form-item>
            <el-form-item label="测试后卡状态：">
                <el-radio-group v-model="ruleForm.status">
                <el-radio :label="1">停卡</el-radio>
                <el-radio :label="2">激活</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开通短信功能：">
                <el-radio-group v-model="ruleForm.duanxin">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    category: '',
                    user: ''
                },
                dialogVisible: false,
                dialog: false,
                dialog1: false,
                checked1: false,
                checked2: false,
                checked3: false,
                checked4: false,
                checked5: false,
                checked6: false,
                checked7: false,
                checked8: false,
                checked9: false,
                checked10: false,
                options: [{
                    value: '选项1',
                    label: '数据同步'
                }, {
                    value: '选项2',
                    label: '导入卡号'
                }, {
                    value: '选项3',
                    label: '卡号划拨'
                }, {
                    value: '选项4',
                    label: '断网'
                }, {
                    value: '选项5',
                    label: '恢复断网'
                }, {
                    value: '选项6',
                    label: '停机'
                }, {
                    value: '选项7',
                    label: '复机'
                }],
                option1: [{
                    value: '选项1',
                    label: '123M／月流量包'
                }, {
                    value: '选项2',
                    label: '物联网（数据）年流量包非定向24GB（201604）'
                }, {
                    value: '选项3',
                    label: '2G季度流量包'
                }, {
                    value: '选项4',
                    label: '物联网（数据）半年流量包非定向12GB'
                }, {
                    value: '选项5',
                    label: '5M／月流量包'
                }, {
                    value: '选项6',
                    label: '500M套餐'
                }, {
                    value: '选项7',
                    label: '超级流量王'
                }, {
                    value: '选项8',
                    label: '套餐叠加包'
                }, {
                    value: '选项9',
                    label: '套餐外叠加1'
                }, {
                    value: '选项10',
                    label: '流量池'
                }],
                option2: [{
                    value: '选项1',
                    label: '在用'
                }, {
                    value: '选项2',
                    label: '用户报停'
                }, {
                    value: '选项3',
                    label: '用户拆机'
                }, {
                    value: '选项4',
                    label: '欠停（单向）'
                }, {
                    value: '选项5',
                    label: '欠停（双向）'
                }],
                option3: [{
                    value: '选项1',
                    label: '库存'
                }, {
                    value: '选项2',
                    label: '可测试'
                }, {
                    value: '选项3',
                    label: '待激活'
                }, {
                    value: '选项4',
                    label: '已激活'
                }, {
                    value: '选项5',
                    label: '测试'
                }],
                option4: [{
                    value: '选项1',
                    label: '已认证'
                }, {
                    value: '选项2',
                    label: '未认证'
                }],
                option5: [{
                    value: '选项1',
                    label: '单卡'
                }, {
                    value: '选项2',
                    label: '流量池'
                }],
                op1: [
                    {
                        value: '选项1',
                        label: '123M／月流量包' 
                    },
                    {
                        value: '选项2',
                        label: '物联网（数据）年流量包非定向24GB（201604）' 
                    }
                ],
                op2: [
                    {
                        value: '选项1',
                        label: '吴开来' 
                    },
                    {
                        value: '选项2',
                        label: '南通塔杨信息科技有限公司' 
                    }
                ],
                 o1: [
                    {
                        value: '选项1',
                        label: '公众市场' 
                    },
                    {
                        value: '选项2',
                        label: '企业市场' 
                    }
                ],
                o2: [],
                o3: [
                    {
                        value: '选项1',
                        label: '新增截图' 
                    },
                    {
                        value: '选项2',
                        label: '单卡直客' 
                    },
                ],
                o4: [
                    {
                        value: '选项1',
                        label: '销售' 
                    },
                    {
                        value: '选项2',
                        label: '塔扬科技' 
                    }
                ],
                o5: [
                    {
                        value: '选项1',
                        label: '销售管理员' 
                    },
                    {
                        value: '选项2',
                        label: 'test1' 
                    }
                ],
                o6: [
                    {
                        value: '选项1',
                        label: '自定义' 
                    }
                ],
                tableData: [],
                tableData1: [],
                newTableData: [],
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                value5: '',
                iccid: '',
                ruleForm: {
                    textarea: '',
                    textarea1:'',
                    textarea2:'',
                    val1: '',
                    val2: '',
                    val3: '',
                    va1: '',
                    va2: '',
                    va3: '',
                    va4: '',
                    va5: 1,
                    price: '',
                    fee: '1',
                    zifei: '',
                    caozifei:'',
                    certify: 1,
                    chenmo: '',
                    test: '',
                    test1: '',
                    danwei:'',
                    test3: '',
                    status: 1,
                    duanxin: 1
                },
                rules: {
                    textarea: [{
                        required: true,
                        message: '请输入ICCID',
                        trigger: 'blur'
                    }],
                    textarea1: [{
                        required: true,
                        message: '请输入ICCID',
                        trigger: 'blur'
                    }],
                    textarea2: [{
                        required: true,
                        message: '请输入ICCID',
                        trigger: 'blur'
                    }],
                    val2: [{
                        required: true,
                        message: '请输入激活日期',
                        trigger: 'blur'
                    }],
                    val3: [{
                        required: true,
                        message: '请选择运营商账号',
                        trigger: 'change'
                    }],
                    va1: [{
                        required: true,
                        message: '请选择业务分类',
                        trigger: 'change'
                    }],
                    va2: [{
                        required: true,
                        message: '请选择客户',
                        trigger: 'change'
                    }],
                    va3: [{
                        required: true,
                        message: '请选择用户业务模式',
                        trigger: 'change'
                    }],
                    va4: [{
                        required: true,
                        message: '请选择产品',
                        trigger: 'change'
                    }],
                    va4: [{
                        required: true,
                        message: '请输入服务周期',
                        trigger: 'blur'
                    }],
                    zifei: [{
                        required: true,
                        message: '流量资费不能为空',
                        trigger: 'blur'
                    }],
                    caozifei: [{
                        required: true,
                        message: '超额流量资费不能为空',
                        trigger: 'blur'
                    }],
                    chenmo: [{
                        required: true,
                        message: '沉默期不能为空',
                        trigger: 'blur'
                    }],
                    test: [{
                        required: true,
                        message: '测试期不能为空',
                        trigger: 'blur'
                    }],
                    test: [{
                        required: true,
                        message: '测试流量不能为空',
                        trigger: 'blur'
                    }]
                },
                checkbox_length: ''
            }
        },
        mounted() {
              this.getCarrierData()
        },
        computed: {
            label() {
                if (this.formInline.category == '选项3' && !this.checkbox_length) {
                    return '0px'
                } else {
                    return '150px'
                }
            },
            title() {
                if (this.formInline.category == '选项1') {
                    return '数据同步'
                } else if(this.formInline.category == '选项2') {
                    return '导入卡号'
                } else if(this.formInline.category == '选项3') {
                    return '卡号划拨'
                } else if(this.formInline.category == '选项4') {
                    return '断网'
                } else if(this.formInline.category == '选项5') {
                    return '恢复断网'
                } else if(this.formInline.category == '选项6') {
                    return '停机'
                } else if(this.formInline.category == '选项7') {
                    return '复机'
                }
            }
        },
        methods: {
              onSubmit() {
                if (this.formInline.user) {
                  this.tableData = this.tableData1
                  this.newTableData = this.tableData.filter((res) => {
                    return res['iccid'].includes(this.formInline.user)
                  })
                } else {
                  this.newTableData = this.tableData1
                }
                this.tableData = this.newTableData
              },
              getDetail(goods) {
                this.$router.push({
                  path: `/carrier/${this.$store.getters.carrier.carrierId}/sim_cards/${goods.id}`
                })
                this.$store.commit('setSimcards', goods)
              },
              getCarrierData() {
                this.$axios.get('/api/simcards').then((res) => {
                  if (res.data.errno === 0) {
                    this.tableData = this.tableData1 = res.data.data.simcardsData
                  }
                })
                this.formInline.user = ''
              },
              show() {
                  if (this.formInline.category == '选项3') {
                    if (this.checkbox_length) {
                        this.dialog1 = true
                    } else {
                        this.dialog = true
                    }
                  } else {
                      this.dialog = true
                  }
                  if(this.checkbox_length) {
                      this.ruleForm.textarea = this.ruleForm.textarea1 = this.ruleForm.textarea2 = this.iccid
                  } else {
                      this.ruleForm.textarea = this.ruleForm.textarea1 = this.ruleForm.textarea2 = ''
                  }
              },
              select() {
                  this.o2 = []
                  if(this.ruleForm.va1 == '选项1') {
                      this.o2 = this.o4 
                  } else {
                      this.o2 = this.o5
                  }
              },
              changeFun(val) {
                  var iccidArr = []
                  val.forEach((item) => {
                      iccidArr.push(item.iccid)
                  });
                  this.iccid = iccidArr.join('\n')
                  this.checkbox_length = val.length
              }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .tr {
        text-align: right;
    }
    
    .lh33 {
        line-height: 33px;
    }
    
    .w100 {
        width: 100%;
    }
</style>
